<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html" >
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Social Full Fun</title>
                <link rel="shortcut icon" type="image/x-icon" href="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/icono.ico"/>
            </f:facet>
            <script type="text/javascript">$(document).ready(function(){iniciarDatos();});</script>
            <link href="http://#{initParam['DIRECCION_SERVIDOR']}/estilos/estilo-comunLogin/theme.css" rel="stylesheet" type="text/css"/>
        </h:head>

        <h:body>
            <p:layout  fullPage="true">
                <p:layoutUnit  position="center">
                    <h:form id="formularioContactenosID" binding="#{comentariosControlador.formularioComentario}">    
                        <p:remoteCommand name="iniciarDatos" 
                                         process="@this"
                                         update="formularioContactenosID"
                                         action="#{comentariosControlador.iniciarDatos()}"
                                         />
                        <p:growl id="growComentarios" showDetail="true" sticky="true" />
                        <h:graphicImage height="110px" width="450px" value="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/logo.png"/>                       
                        <p:separator id="separator1" style="color:#191947"/>
                        <br/>
                        <center><h:outputText style="color:#CCCCCC; font-size: 15px"
                                 value="Tu Comentario o Sugerencia es muy importante para nosotros, ingrésalo a continuación porfavor"/></center>              
                        <br/>
                        <br/>
                        <center>
                        <table>             
                            <tr>
                                <td>
                                     <h:outputLabel value="Comentarios" />
                                </td>
                                <td>
                                    <h:inputTextarea id="comentarioID"  cols="45" rows="5"
                                                     value="#{comentariosDataManager.comentario}" required="true"
                                                     requiredMessage="Porfavor ingrese sus comentarios"
                                                     validatorMessage="La Dirección debe poseer máximo 300 caracteres">
                                            <f:validateLength maximum="300"/>
                                    </h:inputTextarea>
                                </td>
                            </tr>
                            </table>
                            </center>
                            <br/>
                            <center><table cellspacing="2" style="float: bottom">
                            <tr>
                                <td>
                                    <p:commandButton id="botonEnviarComentarioID"  action="#{comentariosControlador.enviarComentario()}" value="Enviar" update="formularioContactenosID"
                                                     disabled="#{comentariosDataManager.band}"/>                                           
                                </td>  
                                <td>
                                   <p:commandButton value="Salir" onclick="top.close()" update="formularioContactenosID"/>
                                </td>
                            </tr> 
                           </table></center>   
                           <p:blockUI block="formularioContactenosID" trigger="botonEnviarComentarioID">
                            Enviando Mail....<br /> 
                           </p:blockUI>
                    </h:form> 
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>
